<template>
	<n-modal v-model:show="modelShowRef" :mask-closable="true" @afterLeave="closeHandle">
		<n-table class="model-content" :bordered="false" :single-line="false">
			<thead>
				<tr>
					<th>功能</th>
					<th>Win 快捷键</th>
					<th>
						<n-space justify="space-between">
							<span> Mac 快捷键 </span>
							<n-icon size="20" class="go-cursor-pointer" @click="closeHandle">
								<close></close>
							</n-icon>
						</n-space>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in shortcutKeyOptions" :key="index">
					<td>{{ item.label }}</td>
					<td>{{ item.win }}</td>
					<td v-if="item.macSource">{{ item.mac }}</td>
					<td v-else>
						<n-gradient-text :size="22">{{ item.mac.substr(0, 1) }}</n-gradient-text>
						+ {{ item.mac.substr(3) }}
					</td>
				</tr>
			</tbody>
		</n-table>
	</n-modal>
</template>

<script setup>
import { WinKeyboard, MacKeyboard } from '@/enums/editPageEnum';

const props = defineProps({
		modelShow: Boolean
	}),
	modelShowRef = ref(false),
	emit = defineEmits(['update:modelShow']);
watch(
	() => props.modelShow,
	(newValue) => {
		modelShowRef.value = newValue;
	}
);

// 快捷键
const shortcutKeyOptions = [
	{
		label: '拖拽画布',
		win: `${WinKeyboard.SPACE.toUpperCase()} + 🖱️ `,
		mac: `${MacKeyboard.SPACE.toUpperCase()} + 🖱️ `,
		macSource: true
	},
	{
		label: '向 上/右/下/左 移动',
		win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ 或 → 或 ↓ 或 ←`,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + ↑ `
	},
	{
		label: '锁定',
		win: `${WinKeyboard.CTRL.toUpperCase()} + L `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + L `
	},
	{
		label: '解锁',
		win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()}+ L `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + L `
	},
	{
		label: '展示',
		win: `${WinKeyboard.CTRL.toUpperCase()} + H `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + H `
	},
	{
		label: '隐藏',
		win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + H `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + H `
	},
	{
		label: '删除',
		win: 'Delete'.toUpperCase(),
		mac: `${MacKeyboard.CTRL.toUpperCase()} + Backspace `
	},
	{
		label: '复制',
		win: `${WinKeyboard.CTRL.toUpperCase()} + C `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + C `
	},
	{
		label: '剪切',
		win: `${WinKeyboard.CTRL.toUpperCase()} + X `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + X `
	},
	{
		label: '粘贴',
		win: `${WinKeyboard.CTRL.toUpperCase()} + V `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + V `
	},
	{
		label: '后退',
		win: `${WinKeyboard.CTRL.toUpperCase()} + Z `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + Z `
	},
	{
		label: '前进',
		win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + Z `,
		mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + Z `
	},
	{
		label: '多选',
		win: `${WinKeyboard.CTRL.toUpperCase()} + 🖱️ `,
		mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + 🖱️ `
	},
	{
		label: '创建分组',
		win: `${WinKeyboard.CTRL.toUpperCase()} + G / 🖱️ `,
		mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + G / 🖱️`
	},
	{
		label: '解除分组',
		win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `,
		mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `
	}
];

function closeHandle() {
	emit('update:modelShow', false);
}
</script>

<style lang="scss" scoped>
.model-content {
	width: 50vw;
	padding-bottom: 20px;
	overflow: hidden;
	border-radius: 15px;
	td {
		padding: 5px 10px;
	}
}
</style>
